<template>
    <page-container title="检测开关" class="container">

      <el-card style="max-width: 480px">
        <text>
            图片上传：
        </text>
        <el-switch
            v-model="switchValue1"
            inline-prompt
            :active-icon="Check"
            :inactive-icon="Close"
            @change="handleChange1"
            />
            <el-form
    ref="formRef1"
    style="max-width: 600px"
    :model="numberValidateForm1"
    label-width="auto"
    class="demo-ruleForm"
  >
  <el-form-item
      label="拍照时长/秒"
      prop="duration"
      :rules="[
        { required: true, message: '不可为空' },
        { type: 'number', message: '必须是数字！' },
      ]"
    >
      <el-input
        v-model.number="numberValidateForm1.duration"
        type="text"
        autocomplete="off"
      />
    </el-form-item>

    <el-form-item
      label="拍照间隔/秒"
      prop="gap"
      :rules="[
        { required: true, message: '不可为空' },
        { type: 'number', message: '必须是数字！' },
      ]"
    >
      <el-input
        v-model.number="numberValidateForm1.gap"
        type="text"
        autocomplete="off"
      />
    </el-form-item>

    <el-form-item
      label="设备序列号"
      prop="equipment_no"
    >
      <el-input
        v-model="numberValidateForm1.equipment_no"
        autocomplete="off"
        disabled
      />
    </el-form-item>

  </el-form>

      </el-card>
      <br>
        <text>
          检测开关：
        </text>
        <el-switch
            v-model="switchValue2"
            inline-prompt
            :active-icon="Check"
            :inactive-icon="Close"
            @change="handleChange2"
            />
    </page-container>

</template>

  <script setup lang="ts">

    import { reactive, ref ,onMounted} from 'vue'
    import type { FormInstance} from 'element-plus'
    import  { ElMessage} from 'element-plus'
    import { Check, Close } from '@element-plus/icons-vue'
    import { getSwitchStatue , remoteSetImageReport ,remoteGetImageReport ,remoteSetSwitchDetection} from '@/api/clothrequest';
    import { useRoute } from 'vue-router';
		
    const route = useRoute();
    const equipment_no = ref()

    onMounted(() => {
      console.log("onMounted")
      numberValidateForm1.equipment_no = route.query.equipment_no
      equipment_no.value = route.query.equipment_no
      getDataList1(route.query.equipment_no)
      getDataList2(route.query.equipment_no)
    })

    const switchValue1 = ref(true)
    const switchValue2 = ref(true)
    const getDataList1 = async(equipment_no) => {
      console.log("getDataList1执行了")
        const res = getSwitchStatue(equipment_no)
        if(res.data.code === 1){
          switchValue2.value = res.data.data === 1
        }else{
          ElMessage({
          message: res.data.data,
          type: 'warning',
          })
        }
    }

    const getDataList2 = async(equipment_no) => {
      console.log("getDataList2执行了")
        const res = remoteGetImageReport(equipment_no)
        if(res.data.code === 1){
          numberValidateForm1.operate = res.data.data.operate
          numberValidateForm1.duration = res.data.data.duration
          numberValidateForm1.gap = res.data.data.gap
          switchValue1.value = numberValidateForm1.operate === 1
        }else{
          ElMessage({
          message: res.data.data,
          type: 'warning',
          })
        }

    }


    const handleChange1 = (value) => {
        console.log('Switch value changed to:', value);
        numberValidateForm1.operate = value ? 1 : 0
        submitForm1(formRef1.value)
    };

    const handleChange2 = (value) => {
        console.log('Switch value changed to:', value);
        const operate1 = {
          operate:value ? 1:0,
          equipment_no: equipment_no.value
        }
        const res = remoteSetSwitchDetection(operate1);
        if(res.data.code === 1){
          if(value){
            ElMessage({
              message: '开启成功',
              type: 'success',
            })
          }else{
            ElMessage({
            message: '关闭成功',
            type: 'success',
          })
          }
          
        }else{
          ElMessage({
            message: '上传失败',
            type: 'success',
          })
        }
    };

    const formRef1 = ref<FormInstance>()

    const numberValidateForm1 = reactive({
      operate: 0,
      duration: '',
      gap: '',
      equipment_no:''
    })

const submitForm1 = (formEl: FormInstance | undefined) => {
  console.log(numberValidateForm1)
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
      const res = remoteSetImageReport(numberValidateForm1)
      if (res.data.code === 1){
        ElMessage({
          message: res.data.data,
          type: 'success',
          })
      }else{
        ElMessage({
          message: res.data.data,
          type: 'warning',
          })
      }
    } else {
      console.log('error submit!')
    }
  })
}

  </script>

  <style lang="scss" scoped>
  .container {
    border-radius: 20px;
    font-weight: bold;
    font-size: 17px;
  }
  .add-button {
    background-color: #077aee;
    font-weight: bold;
    color: #fff;
  }
  .select-button {
    background-color: #077aee;
    color: #fff;
  }
  </style>
